<template>
  <Header></Header>
  <div class="course-filter">
    <div class="filter-main">
      <div class="filter-item">
        <div class="item-title">课程方向：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in FirstList"
            :key="item.id"
            @click="evtFirst(item.id)"
            :class="currentIdx == item.id ? 'filter-all' : ''"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程分类：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in secondList"
            :key="item.id"
            @click="evtSecond(item.id)"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="filter-item">
        <div class="item-title">课程方向：</div>
        <ul>
          <li class="filter-all">全部</li>
          <li
            v-for="item in levelList"
            :key="item.id"
            @click="evtLevel(item.id)"
          >
            {{ item.name }}
            1232132131
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="course-list">
    <div class="list-main">
      <div class="list-t">
        <ul>
          <li
            v-for="item in courseFilter"
            :key="item.id"
            @click="evtFilter(item.id, item.status)"
          >
            <span :class="currentId == item.id ? 'active' : ''">{{
              item.name
            }}</span>
            <div class="caret" v-if="item.id == 4">
              <el-icon
                :size="8"
                :color="item.status == 'price-desc' ? '#2c81ff' : ''"
                ><CaretTop
              /></el-icon>
              <el-icon
                :size="8"
                :color="item.status == 'price-asc' ? '#2c81ff' : ''"
                ><CaretBottom
              /></el-icon>
            </div>
          </li>
        </ul>
        <div>
          <el-radio-group v-model="radio" @change="tabCourse">
            <el-radio :label="1">免费课程</el-radio>
            <el-radio :label="2">会员课程</el-radio>
          </el-radio-group>
        </div>
      </div>
      <ul class="list-c">
        <li
          v-for="item in CourseSearchList"
          :key="item.id"
          @click="goDetail(item.id)"
          class="courseItem"
        >
          <img :src="item.courseCover" />
          <div class="course-content">
            <h3>{{ item.courseName }}</h3>
            <div>
              {{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}人报名
            </div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <div class="price-total">¥ {{ item.discountPrice }}</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="list-b">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="courseTotal"
          @current-change="curretChange"
        />
      </div>
    </div>
  </div>
  <footer-one></footer-one>
</template>

<script setup>
//引入组件

//element
import { CaretTop, CaretBottom, FirstAidKit } from "@element-plus/icons-vue";
import { onBeforeMount, reactive, ref } from "@vue/runtime-core";
// mixins混入
import courseType from "../mixins/course.js";
let { courseTypeFn } = courseType();
//api
import {
  getFirstCategorys,
  getSecondCategorys,
  getSearch,
} from "../utils/api/coures";

//一级分类的数据
let FirstList = ref([]);
// 二级分类的数据
let secondList = ref([]);
//课程数据
let CourseSearchList = ref([]);
// 课程总数量
let courseTotal = ref(0);
// 课程难度
let levelList = ref([
  { name: "初级", id: 1 },
  { name: "中级", id: 2 },
  { name: "高级", id: 3 },
]);
// 查询课程的参数

let courseParams = reactive({
  pageNum: 1,
  pageSize: 8,
  entity: {
    firstCategory: "",
    secondCategory: "",
    courseLevel: "",
    sortBy: "",
    isMember: "",
    isFree: "",
  },
});
// 生命周期
onBeforeMount(() => {
  // 获取一级分类
  getFirstCategorys().then((res) => {
    FirstList.value = res.data.list;
  });

  // 获取二级分类
  secCategorys({
    categoryId: -1,
  });
  // 查询课程
  getCourseSearch(courseParams);
});
// 查询二级分类
const secCategorys = (params) => {
  getSecondCategorys(params).then((res) => {
    secondList.value = res.data.list;
    // console.log("dddd22dddd", res.data.list);
  });
};
// 查询课程
const getCourseSearch = (data) => {
  getSearch(data).then((res) => {
    CourseSearchList.value = res.data.pageInfo.list;
    // 课程总数量
    courseTotal.value = res.data.pageInfo.total;
    // console.log("sdasdsadsad", res.data.pageInfo.list);
  });
};
//切换class
let currentIdx = ref(null);

// 点击一级分类
const evtFirst = (id) => {
  currentIdx.value = id;
  // 获取二级分类
  secCategorys({
    categoryId: id,
  });
  // 查询课程
  courseParams.entity.firstCategory = id;
  courseParams.entity.secondCategory = "";
  courseParams.entity.courseLevel = "";
  courseParams.entity.isMember = "";
  courseParams.entity.isFree = "";
  getCourseSearch(courseParams);
};
// 点击二级菜单
const evtSecond = (id) => {
  currentIdx.value = id;
  courseParams.entity.secondCategory = id;
  courseParams.entity.courseLevel = "";
  courseParams.entity.isMember = "";
  courseParams.entity.isFree = "";
  getCourseSearch(courseParams);
};
// 点击课程难度
const evtLevel = (id) => {
  currentIdx.value = id;
  courseParams.entity.courseLevel = id;
  getCourseSearch(courseParams);
};

// 课程条件筛选的数据
let courseFilter = ref([
  { id: 1, name: "综合  | " },
  { id: 2, name: "最新课程   |" },
  { id: 3, name: "最多购买 |" },
  { id: 4, name: "价格", status: "" },
]);
// 控制class切换
let currentId = ref(1);

// 点击课程筛选
const evtFilter = (id, status) => {
  // 切换class
  currentId.value = id;
  if (id == 1) {
    courseParams.entity.sortBy = "";
    courseFilter.value[3].status = "";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
  } else if (id == 2) {
    courseParams.entity.sortBy = "item-desc";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
    courseFilter.value[3].status = "";
  } else if (id == 3) {
    courseParams.entity.sortBy = "clicks-desc";
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "";
    courseFilter.value[3].status = "";
  } else if (id == 4) {
    if (status == "price-desc" || status == "") {
      courseParams.entity.isMember = "";
      courseParams.entity.isFree = "";
      courseFilter.value[3].status = "price-asc";
      status = "price-asc";
    } else {
      courseFilter.value[3].status = "price-desc";
      status = "price-desc";
    }
    courseParams.entity.sortBy = status;
  }
  getCourseSearch(courseParams);
};

// m免费课程和会员课程筛选
const radio = ref(3);

// 点击免费课程和会员课程
let tabCourse = (val) => {
  if (val == "1") {
    console.log(val);
    courseParams.entity.isMember = "";
    courseParams.entity.isFree = "1";
  } else if (val == "2") {
    courseParams.entity.isFree = "";
    courseParams.entity.isMember = "1";
    console.log(val);
  }
  getCourseSearch(courseParams);
};
// 分页
const curretChange = (val) => {
  courseParams.pageNum = val;
  getCourseSearch(courseParams);
};

let router = useRouter();
// 跳转到课程详情页
const goDetail = (id) => {
  // alert("2"),
  router.push({
    path: "/course/detail",
    query: {
      id,
    },
  });
};
</script>

<style lang="scss" scoped>
.courseItem {
  // border-radius: 22px;
  margin-bottom: 20px;
  transition: margin-top 0.2s;
  & img {
    border-radius: 22px;
  }
}
.courseItem:hover {
  margin-top: 20px;
  cursor: pointer;
  border-radius: 22px;
}
.courseItem:nth-child(4n + 0) {
  margin-right: 0 !important;
}
.course-filter {
  width: 100%;
  height: 197px;
  background: #f3f5f9;
}
.filter-main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 1000px;
  height: 197px;
  margin: 0 auto;
}
.filter-item {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.item-title {
  margin-left: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.filter-item ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-item ul li {
  /* padding: 0 2px; */
  /* margin: 0 3px;  */
  margin-right: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #515759;
}
.filter-item ul li.filter-all {
  /* width: 50px; */
  line-height: 30px;
  text-align: center;
  color: #388fff;
  font-size: 14px;
  background: rgba(44, 128, 255, 0.1);
  border-radius: 5px;
}

.list-main {
  width: 1000px;
  margin: 0 auto;
}
.list-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.list-t ul {
  display: flex;
}
.list-t ul li {
  display: flex;
  align-items: center;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #515759;
  cursor: pointer;
}
.list-t ul li .active {
  color: #2c81ff;
}
.caret {
  display: flex;
  flex-direction: column;
}
.list-c {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-c li {
  float: left;
  margin-top: 38px;
  width: 240px;
  height: 275px;
  background: #ffffff;
  box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
  border-radius: 22px;
}
.list-c li img {
  width: 240px;
  height: 153px;
}
.course-content {
  padding: 7px 16px;
}
.course-content h3 {
  font-size: 12px;
  color: #333333;
}
.course-content > div {
  padding: 7px 0;
  font-size: 12px;
  color: #808080;
}
.price {
  display: flex;
}
.price-vip {
  width: 64px;
  height: 16px;
  margin-right: 3px;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
  border-radius: 16px 0px 16px 0px;
}
.price-total {
  font-size: 12px;
  color: #ff727f;
}
.list-b {
  padding-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
